<template>
  <div id="kxz-dragCpt" ref="kxz-dragCpt" :class="dragStatus">
    <div class="title" @mousedown="handleDrag" :class="{unDrag:!isOpen}">
      <div>
        <i class="handle open" v-if="!isOpen" @click="handleOpen">客服聊天室</i>
        <template v-else>
          <i class="handle max el-icon-d-caret" v-if="!isMax" @click="handleMax"></i>
          <i class="handle revert el-icon-caret-bottom" v-else @click="handleRevert"></i>
          <i class="handle min el-icon-circle-cross" @click="handleMin"></i>
        </template>
      </div>
    </div>
    <div class="resizeL" ref="kxz-dragCpt__resizeL" :class="{unresize:!isOpen}"></div>
    <div class="resizeT" ref="kxz-dragCpt__resizeT" :class="{unresize:!isOpen}"></div>
    <div class="resizeR" ref="kxz-dragCpt__resizeR" :class="{unresize:!isOpen}"></div>
    <div class="resizeB" ref="kxz-dragCpt__resizeB" :class="{unresize:!isOpen}"></div>
    <div class="resizeLT" ref="kxz-dragCpt__resizeLT" :class="{unresize:!isOpen}"></div>
    <div class="resizeTR" ref="kxz-dragCpt__resizeTR" :class="{unresize:!isOpen}"></div>
    <div class="resizeBR" ref="kxz-dragCpt__resizeBR" :class="{unresize:!isOpen}"></div>
    <div class="resizeLB" ref="kxz-dragCpt__resizeLB" :class="{unresize:!isOpen}"></div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragMinWidth: 200,
      dragMinHeight: 40,
      dragStatus: '',
      isMax: false,  // 控制最大化和还原
      isOpen: false,  // 控制最小化和打开
    }
  },
  watch: {
    isOpen() {
      this.isResize()
    }
  },
  mounted() {
    this.isResize()
  },
  methods: {
    handleDrag(e) {
      let oDrag = this.$refs["kxz-dragCpt"]
      const disX = e.clientX - oDrag.offsetLeft
      const disY = e.clientY - oDrag.offsetTop
      const isOpen = this.isOpen
      if(isOpen){
          document.onmousemove = function(event) {
            event = event || window.event
            let iL = event.clientX - disX;
            let iT = event.clientY - disY;
            let maxL = document.documentElement.clientWidth - oDrag.offsetWidth
            let maxT = document.documentElement.clientHeight - oDrag.offsetHeight
            iL <= 0 && (iL = 0)
            iT <= 0 && (iT = 0)
            iL >= maxL && (iL = maxL)
            iT >= maxT && (iT = maxT)
            oDrag.style.left = iL + "px"
            oDrag.style.top = iT + "px"
            return false
          }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }else{
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    handleOpen() {
      this.dragStatus = 'open'
      this.isOpen = true
      this._initLT()
    },
    handleMax() {
      this.dragStatus = 'max'
      this.isMax = true
      this._initLT()
    },
    handleRevert() {
      this.dragStatus = 'open'
      this.isMax = false
      this._initLT()
    },
    handleMin() {
      this.dragStatus = 'min'
      this.isMax = false
      this.isOpen = false
      this._initLT()
    },
    isResize() {
      const isOpen = this.isOpen
      const resize = this._resize
      const unresize = this._unresize
      const refs = this.$refs
      const oDrag = refs['kxz-dragCpt']
      const oL = refs['kxz-dragCpt__resizeL']
      const oT = refs['kxz-dragCpt__resizeT']
      const oR = refs['kxz-dragCpt__resizeR']
      const oB = refs['kxz-dragCpt__resizeB']
      const oLT = refs['kxz-dragCpt__resizeLT']
      const oTR = refs['kxz-dragCpt__resizeTR']
      const oBR = refs['kxz-dragCpt__resizeBR']
      const oLB = refs['kxz-dragCpt__resizeLB']

      if (isOpen) {
        //四角
        resize(oDrag, oLT, true, true, false, false);
        resize(oDrag, oTR, false, true, false, false);
        resize(oDrag, oBR, false, false, false, false);
        resize(oDrag, oLB, true, false, false, false);
        //四边
        resize(oDrag, oL, true, false, false, true);
        resize(oDrag, oT, false, true, true, false);
        resize(oDrag, oR, false, false, false, true);
        resize(oDrag, oB, false, false, true, false);
      } else {
        //四角
        unresize(oLT);
        unresize(oTR);
        unresize(oBR);
        unresize(oLB);
        //四边
        unresize(oL);
        unresize(oT);
        unresize(oR);
        unresize(oB);
      }
    },
    _initLT() {
      let oDrag = this.$refs["kxz-dragCpt"]
      oDrag.style.top = ''
      oDrag.style.left = ''
    },
    _resize(oParent, handle, isLeft, isTop, lockX, lockY) {
      let dragMinWidth = this.dragMinWidth
      let dragMinHeight = this.dragMinHeight
      handle.onmousedown = function(event) {
        event = event || window.event;
        let disX = event.clientX - handle.offsetLeft;
        let disY = event.clientY - handle.offsetTop;
        let iParentTop = oParent.offsetTop;
        let iParentLeft = oParent.offsetLeft;
        let iParentWidth = oParent.offsetWidth;
        let iParentHeight = oParent.offsetHeight;
        document.onmousemove = function(event) {
          event = event || window.event;
          let iL = event.clientX - disX;
          let iT = event.clientY - disY;
          let maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
          let maxH = document.documentElement.clientHeight - oParent.offsetTop - 2; var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
          let iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
          isLeft && (oParent.style.left = iParentLeft + iL + "px");
          isTop && (oParent.style.top = iParentTop + iT + "px");
          iW < dragMinWidth && (iW = dragMinWidth);
          iW > maxW && (iW = maxW);
          lockX || (oParent.style.width = iW + "px");
          iH < dragMinHeight && (iH = dragMinHeight);
          iH > maxH && (iH = maxH);
          lockY || (oParent.style.height = iH + "px");
          if ((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;
          return false;
        };
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      }
    },
    _unresize(handle) {
      handle.onmousedown = null
    }
  }
}
</script>

<style lang="scss" scoped>
#kxz-dragCpt {
  position: absolute; // top: 100px;
  top: 60px;
  right: 0;
  z-index:9;
  width: 160px;
  height: 40px;
  background: #e9e9e9;
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: 0 1px 3px 2px #666;

  &.open {
    top: 10vh;
    left: 5vw;
    width: 90vw;
    height: 80vh;
  }
  &.max {
    top: 62px;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
  }
  &.min {
    top: 60px;
    right: 0;
    width: 160px !important;
    height: 40px !important;
  }
  .handle {
    cursor: pointer;
    margin-left: 10px;
    &.open {
      font-size: 14px;
      font-style: normal;
      margin-right: 36px;
    }
    &.max:hover {
      color: green;
    }
    &.revert:hover {
      color: blue;
    }
    &.min {
      margin-right: 15px;
      &:hover {
        color: red;
      }
    }
  }

  .title {
    position: relative;
    height: 27px;
    margin: 5px;
    cursor: move;
    &.unDrag{
      cursor: default;
    }
    h2 {
      font-size: 14px;
      height: 27px;
      line-height: 24px;
      border-bottom: 1px solid #A1B4B0;
    }
    div {
      position: absolute;
      height: 19px;
      top: 2px;
      right: 0;
    }
  }
  .content {
    position: absolute;
    top: 37px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    overflow: auto;
  }

  .resizeBR {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    cursor: se-resize;
  }
  .resizeL,
  .resizeT,
  .resizeR,
  .resizeB,
  .resizeLT,
  .resizeTR,
  .resizeLB {
    position: absolute;
    background: #000;
    overflow: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .resizeL,
  .resizeR {
    top: 0;
    width: 8px;
    height: 100%;
    cursor: w-resize;
  }
  .resizeR {
    right: 0;
    cursor: e-resize;
  }

  .resizeT,
  .resizeB {
    width: 100%;
    height: 8px;
    cursor: n-resize;
  }
  .resizeB {
    height: 8px;
    cursor: s-resize;
  }
  .resizeT {
    top: 0;
  }
  .resizeB {
    bottom: 0;
  }

  .resizeLT,
  .resizeTR,
  .resizeLB {
    width: 8px;
    height: 8px;
    background: #FF0;
  }
  .resizeLT {
    top: 0;
    left: 0;
    cursor: nw-resize;
  }
  .resizeTR {
    top: 0;
    right: 0;
    cursor: ne-resize;
  }
  .resizeLB {
    left: 0;
    bottom: 0;
    cursor: sw-resize;
  } // 不能拖拽时的样式
  .unresize {
    &.resizeL,
    &.resizeT,
    &.resizeR,
    &.resizeB,
    &.resizeLT,
    &.resizeTR,
    &.resizeLB,
    &.resizeBR {
      cursor: default;
    }
  }
}
</style>
